<template>
  <div class="page__header">
    <div class="label__item">
      <span>项目</span>
      <el-select size="small" style="width: 150px;" v-model="queryParams.app_id" @change="proChange">
        <el-option v-for="item in permission_projectList" :value="item.app_id" :label="item.name" :key="item.app_id"></el-option>
      </el-select>
    </div>
    <template v-if="pageMode === 'batch_import'">
      <el-button size="small" type="primary" @click="handleImportFile">
        选择文件(excel)
        <input type="file" accept=".xls, .xlsb, .xlsx" ref="triggerFile" style="display: none" @change="importfile" >
      </el-button>
      <el-button size="small" type="default" @click="downloadTemplate">模板下载</el-button>
      <el-button size="small" type="default" @click="preview">预览结果</el-button>
      <el-button size="small" type="primary" @click="confirmImport" v-show="hasPreviewNodes">直接导入</el-button>
      <el-button size="small" type="danger" @click="$emit('change-mode', 'list')">退出</el-button>
    </template>
    <template v-else>
      <el-button size="small" type="primary" @click="$emit('change-mode', 'batch_import')">批量导入</el-button>
      <el-button size="small" type="primary" @click="add">新增</el-button>
      <el-button size="small" type="default" @click="selectAll">全选</el-button>
      <el-button size="small" type="default" @click="reverseSelect">反选</el-button>
      <el-button size="small" type="danger" @click="del">删除</el-button>
      <el-button size="small" type="danger" @click="exit">保存并退出</el-button>
    </template>
    <!-- <el-button type="primary">保存</el-button> -->
  </div>
</template>

<script>
import { mapGetters } from 'vuex'

export default {
  props: {
    pageMode: { type: String, default: '' },
    hasPreviewNodes: { type: Boolean, default: false }
  },
  data: () => ({
    queryParams: {
      app_id: ''
    }
  }),
  computed: {
    ...mapGetters('zcsd-core', ['permission_projectList'])
  },
  methods: {
    proChange (val) {
      this.$emit('appid-change', this.queryParams.app_id)
    },
    handleImportFile () {
      this.$refs.triggerFile.click()
    },
    downloadTemplate () {
      const path = '/event-template.xlsx'
      const a = document.createElement('a')
      a.href = path
      a.download = '事件模板.xlsx'
      a.click()
    },
    importfile (e) {
      this.$emit('change', 'import', e.target.files[0])
    },
    confirmImport () {
      this.$emit('change', 'confirm')
    },
    preview () {
      this.$emit('change', 'preview')
    },
    selectAll () {
      this.$emit('change', 'select')
    },
    reverseSelect () {
      this.$emit('change', 'revert')
    },
    add () {
      this.$emit('change', 'add')
    },
    del () {
      this.$emit('change', 'del')
    },
    exit () {
      const path = this.$route.path
      this.$store.dispatch('zcsd-core/tagsView/delView', { path }).then(({ visitedViews }) => {
        this.$router.push('/feature/report-analysis')
      })
    }
  },
  mounted () {
    this.queryParams.app_id = parseInt(this.$route.query.app_id) || this.permission_projectList[0].app_id
    this.$emit('appid-change', this.queryParams.app_id)
  }
}
</script>

<style lang="scss" scoped>
.page__header {
  display: flex;
  /deep/ .el-form-item {
    margin-bottom: 0;
  }
}
.label__item {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-right: 10px;
}
</style>
